export const linewaterfall = () => {
    return `
    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  
  const state = reactive({
    option: {
  
      tooltip: {
        trigger: 'axis'
      },
  
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
  
      xAxis: {
        type: 'category',
        axisTick: { show: false },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          color: "#97B2E0",
        },
      },
      yAxis: {
        type: 'value',
        name:"(万元)", 
       
        nameTextStyle: {
            color:"#97B2E0",
            padding:[0,0,-550,-50]
        },
        axisLabel: {
          color: "#97B2E0",
        },
        splitLine: {
          show: true,
          lineStyle: {
              type: [1,2],
              dashOffset: 1,
              color: '#A4DAFF'
          }
      },
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          color:"#00FFE4",
          smooth: true,
          data: [120, 132, 101, 134, 90, 230, 210],
                 areaStyle: {
                    //新版渐变色实现
                    color: {
                       type: 'linear',
                       x: 0,
                       y: 0,
                       x2: 0,
                       y2: 1,
                       colorStops: [
                          {
                             offset: 1,
                             color: 'rgba(1, 180, 255, 0)'
                          },
                          {
                             offset: 0,
                             color: '#00FFE4'
                          }
                       ]
                    }
                  }
        },
      ]
    }
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    `;
  };
  